<script setup lang="ts">
import {videoImagesDir} from '@/utils/config.ts'
import TextInfo from '@/components/text-info.vue'

const imageWidth = 397
const imageHeight = Math.ceil(imageWidth * 9 / 16)

import {DreamVideo, Movie} from '@/data/Dream'

defineProps<{
  movie: Movie
  video: DreamVideo
}>()
</script>

<template>
  <a-image-preview-group >
  <div class="video-images" :class="{'few-images': video.images.length < 3}">
    <div class="video-image"
         v-for="(img) in video.images" :key="img"
    >
      <a-image :width="imageWidth"
               :height="imageHeight"
               :src="videoImagesDir + img"
      />
    </div>
  </div>
  </a-image-preview-group>

  <text-info :movieProps="movie"
             :video="video"
  />
</template>

<style scoped lang="stylus">
.video-images
  display: flex
  flex-wrap: wrap
  justify-content: space-between

  .video-image
    margin-bottom 3px

  & > :nth-last-child(-n+4)
    margin-bottom 0

.few-images
  & > :nth-child(2)
    margin-left 3px
</style>